html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  font-size: 1.8rem;
}
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    max-width: 150rem;
    display: flex;
    flex-flow: column;

    .head_btns {
      flex: none;
      border-bottom: 1px solid var(--color9);
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      transform: translateY(-10rem);
      opacity: 0;
      &.open {
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        opacity: 1;
        transform: none;
      }
      div {
        margin: 1rem;
      }

      .note_title {
        flex: auto;
        max-width: 40rem;
        min-width: 20rem;
        display: flex;
        height: 3rem;
        line-height: 3rem;
        border-bottom: 1px solid var(--color9);
        align-items: center;

        &.focus {
          border-bottom: 1px solid var(--text-hover-color);
        }

        input {
          flex: auto;
          width: 0;
          margin: 0;
          outline: none;
          font-size: 1.8rem;
          border: none;
          background: transparent;
          -webkit-appearance: none;
        }

        i {
          display: none;
          flex: none;
        }
      }
      .setting_btn,
      .history_btn,
      .table_btn,
      .code_btn,
      .link_btn,
      .h_go_home,
      .img_btn,
      .preview_state,
      .to_max_btn,
      .undo_btn,
      .redo_btn,
      .save_btn {
        flex: none;
        height: 3rem;
        width: 3rem;
        text-align: center;
        line-height: 3rem;
        font-size: 2.6rem;

        &:hover {
          color: var(--text-hover-color);
          transform: scale(1.2);
        }
      }
      .undo_btn.deactive,
      .redo_btn.deactive {
        color: var(--color9);
      }
      .save_btn.active {
        color: var(--icon-color);
      }
    }

    .edit_wrap {
      flex: auto;
      display: flex;
      flex-flow: row;
      width: 100%;
      height: 60%;
      word-break: break-all;
      transform: translateY(10rem);
      opacity: 0;
      &.open {
        transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
        opacity: 1;
        transform: none;
      }
      .preview_box,
      .edit_box {
        font-size: inherit;
        width: 50%;
        flex: auto;
        height: 100%;
        overflow-y: auto;
        line-height: 1.5;
        background-color: transparent;
      }

      .preview_box {
        position: relative;
        overflow-y: none;
        transform: translateX(0);
        .resize {
          position: absolute;
          top: 0;
          left: 0;
          width: 1rem;
          height: 100%;
          z-index: 99;
          &:hover {
            background-color: var(--text-hover-color);
          }
        }
        .content {
          position: relative;
          width: 100%;
          height: 100%;
          padding: 0 2rem;
          overflow-y: auto;
        }
        img {
          display: block;
          max-height: 30rem;
          margin: 1rem 0;
          max-width: 100%;
        }
      }

      .edit_box {
        border: none;
        border-right: 1px solid var(--color9);
        outline: none;
        resize: none;
        overflow: hidden;

        &.open {
          border: none;
        }

        .ace_gutter {
          opacity: 0.8;
        }
      }
    }
  }
}
